<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SSE Example</title>
</head>
<body>
<h1>SSE Data:</h1>
<div id="sse-data"></div>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<script>
    let eventSource;
    function start() {
        fetch('/start').then(response => response.text()).then(text => console.log(text));
        eventSource = new EventSource('/sseOne');
        eventSource.onmessage = function(event) {
            const p = document.createElement('p');
            p.textContent = event.data;
            document.getElementById('sse-data').appendChild(p);
        };
        eventSource.onerror = function(error) {
            console.error("EventSource failed:", error);
        };
    }
    function stop() {
        fetch('/stop').then(response => response.text()).then(text => console.log(text));
        if (eventSource) {
            eventSource.close();
        }
    }
</script>
</body>
</html>